<template>
  <BorderBox10 class="w-full h-full">
    <div class="p-6">
      <Title :title="`病症Top10`"></Title>
      <div class="w-full box-border">
        <div class="w-full h-full py-4 px-12 box-border">
          <div class="w-full grid grid-cols-6 h-4 py-4 text-left ">
            <p class="text-[#00FFFF]">排名</p>
            <p class="text-[#00FFFF] col-span-3">疾病</p>
            <p class="text-[#00FFFF]">数量</p>
            <p class="text-[#00FFFF]">占比</p>
          </div>
          <div class="w-full max-h-40 overflow-y-auto">
            <div v-for="(item, index) in illList"
                 :key="index" class=" grid grid-cols-6 w-full text-slate-300  h-full leading-8  text-left "
                 @click="showUser(item.user_ids)"
            >
              <p> {{ index+1 }} </p>
              <p class="col-span-3">{{ item.username }}</p>
              <p>{{ item.count }}</p>
              <p>{{ item.percent }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </BorderBox10>
</template>

<script setup>
import { BorderBox10, Decoration8 } from '@kjgl77/datav-vue3'
import { defineProps } from 'vue'
import Title from '@/view/memberManager/components/title.vue'
import {useRouter} from "vue-router";

const router = useRouter()

const props = defineProps({
  illList: {
    type: Array,
    default: () => []
  }
})

const showUser = (users) => {
  router.push({
    path: 'fdUser',
    query: {
      users: String(users)
    }
  })
}


</script>
<style scoped>
.lists {
  border-bottom: 1px solid #53749C;
}
</style>
